<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Scratch网页播放器测试</title> 
  <link rel="stylesheet" href="player.css" /> 
  <link rel="stylesheet" href="index.css" /> 
  <!-- 自适应 禁用屏幕缩放 --> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 
  <!-- 加载Bootstrap核心CSS --> 
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" /> 
  <script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> 
  <script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
  <!-- 字体修改 --> 
  <!-- style type="text/css">body,button,input,select,textarea,h1,h2,h3,h4,h5,h6 {
        font-family: Microsoft YaHei, '宋体', Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    }
    </style>  -->
 </head>
 <body>
  <div class="area" id="title-area" style="visibility: none;"> 
   <p>正在加载组件，请稍后<a class="dropdown">。<select id="examples"> <option value=""> </option><option value="11397100">3D Remix by DadOfMrLog </option><option value="15945630">O by DCPU-16 </option><option value="10128407">Paper Minecraft by griffpatch </option><option value="16207935">Alone in the depths by sticku </option><option value="16205373">3D Framework by DadOfMrLog </option><option value="31903442">gb.sb2 [Dr. Mario] by DCPU-16 </option><option value="34791164">gb.sb2 [Mario Land 2] by DCPU-16 </option><option value="21554369">Epic Ninja by griffpatch </option><option value="15832807">Pretty by blob8108 </option></select></a>.</p> 
  </div> 



  <h1>Scratch网页播放器测试</h1> 


  <!-- 播放器 -->
  <div class="area" id="player-area"> 
      <!-- 1.上面的控制栏 -->
      <div class="controls" style="background:#EDEDED"> 
          <span class="stop"></span> 
          <span class="pause"></span> 
          <span class="flag" title="Shift+click to enable turbo mode."></span> 
          <div class="turbo">加速模式</div> 
          <span class="full-screen"></span> 
      </div> 
      <!-- 2.播放器本体 -->
      <div class="player"></div> 
      <br>
      <!-- 3.下载文件的进度条 -->
      <div class="progress" style="background:#EDEDED">
      <div id="progress_bar_one" class="progress-bar" style="width: 1%;height:20px;"> 
        <span>加载失败，请刷新重试</span> 
      </div>
      </div>  
      <!-- 3.异常后显示的区域 -->
      <div class="internal-error">
          发生错误，请联系程序猿 
          <a id="error-bug-link" target="_blank" href="https://weibo.com/syjsu">点击这里</a>去联系. 
      </div> 
  </div> 

  <div class="title"> 
   <div class="progress-bar"></div> 
   <input class="url" value="请把文件拖拽到这里打开,即可打开本地文件" disabled="disabled" /> 
   <a target="_blank" class="project-link" title="View project on Scratch"></a> 
  </div> 

  <h1>扫描二维码可以在手机上看哦</h1> 
  <img typeof="foaf:Image" src="http://qr.liantu.com/api.php?&amp;w=200&amp;text=http://syjsu.oschina.io/scratch-player/" alt="扫码分享" title="扫码分享" /> 
  <div class="area" id="project-area" style="display:none;"> 
   <section class="package"> 
    <h1>Package this project</h1> 
    <p>Get a link to a web page that automatically runs your project.</p> 
    <p> <a href="#" target="_blank" id="package-link">Package</a> <input type="checkbox" id="package-turbo" /> <label for="package-turbo">Turbo mode</label> <input type="checkbox" id="package-full-screen" checked="" /> <label for="package-full-screen">Full screen</label> </p> 
   </section> 
   <section class="package"> 
    <h1>Embed this project</h1> 
    <p>Include the phosphorus player in your web site.</p> 
    <p> <input readonly="" id="embed-code" /> <input type="checkbox" id="embed-auto-start" checked="" /> <label for="embed-auto-start">Start automatically</label> <input type="checkbox" id="embed-light-content" /> <label for="embed-light-content">Light controls</label> <input type="checkbox" id="embed-hide-controls" /> <label for="embed-hide-controls">Hide UI</label> </p> 
   </section> 
   <section> 
    <h1>Report a problem</h1> 
    <p>phosphorus is still in development. <a id="bug-link" target="_blank" href="https://github.com/nathan/phosphorus/issues/new">Click here</a> to report a problem with this project.</p> 
   </section> 
  </div> 
  <script src="fonts.js"></script> 
  <script src="https://cdn.bootcss.com/jszip/2.4.0/jszip.js"></script> 
  <script src="rgbcolor.js"></script> 
  <script src="StackBlur.js"></script> 
  <script src="canvg.js"></script> 
  <script src="phosphorus.js"></script> 
  <script src="player.js"></script> 
  <script>
(function() {
  'use strict';
  var prefix = 'https://scratch.mit.edu/projects/';
  var initialId = location.hash.substr(1);
  if (initialId === 'zip') initialId = '';
  var titleArea = document.querySelector('#title-area');
  var playerArea = document.querySelector('#player-area');
  var projectArea = document.querySelector('#project-area');
  playerArea.style.height = projectArea.style.height = 'auto';
  var titleAreaHeight = titleArea.offsetHeight;
  var playerAreaHeight = playerArea.offsetHeight;
  var projectAreaHeight = projectArea.offsetHeight;
  playerArea.style.height = projectArea.style.height = 0;
  var examples = document.querySelector('#examples');
  var urlInput = document.querySelector('.url');
  //urlInput.value = prefix + initialId;
  var progressBar = document.querySelector('.progress-bar');
  var player = document.querySelector('.player');
  var projectLink = document.querySelector('.project-link');
  var bugLink = document.querySelector('#bug-link');
  var packageLink = document.querySelector('#package-link');
  var packageTurbo = document.querySelector('#package-turbo');
  var packageFullScreen = document.querySelector('#package-full-screen');
  var embedCode = document.querySelector('#embed-code');
  var embedAutoStart = document.querySelector('#embed-auto-start');
  var embedLightContent = document.querySelector('#embed-light-content');
  var embedHideControls = document.querySelector('#embed-hide-controls');
  var timeout;
  examples.addEventListener('change', function() {
    if (examples.value) {
      location.hash = '#' + examples.value;
      examples.selectedIndex = 0;
    }
  });
  window.addEventListener('hashchange', function() {
    var id = location.hash.substr(1);
    if (id !== 'zip') {
      if (+id !== +id) id = '';
      urlInput.value = prefix + id;
    }
    load(id);
  });
  function show(id) {
    titleArea.style.height = id ? 0 : titleAreaHeight + 'px';
    playerArea.style.height = id ? playerAreaHeight + 'px' : 0
    projectArea.style.height = id ? projectAreaHeight + 'px' : 0;
    if (!id) urlInput.focus();
  }
  function load(id) {
    if (id !== 'zip') {
      show(id);
    } else {
      id = '';
    }
    document.title = 'phosphorus';
    P.player.load(id, function(stage) {
      stage.triggerGreenFlag();
    }, function(title) {
      document.title = title ? title + ' \xb7 phosphorus' : 'phosphorus';
      updateBugLink();
    });
    projectLink.href = P.player.projectURL;
    updateBugLink();
    updatePackageLink();
    updateEmbedCode();
  }
  function updateBugLink() {
    bugLink.href = P.player.projectId ? 'https://github.com/nathan/phosphorus/issues/new?title=' + encodeURIComponent(P.player.projectTitle || P.player.projectURL) + '&body=' + encodeURIComponent('\n\n\n' + P.player.projectURL + '\nhttps://phosphorus.github.io/#' + P.player.projectId + '\n' + navigator.userAgent) : 'https://github.com/nathan/phosphorus/issues/new?body=' + encodeURIComponent('\n\n\n' + navigator.userAgent);
  }
  function updatePackageLink() {
    packageLink.href = P.player.projectId ? '/app.html?id=' + P.player.projectId + '&turbo=' + packageTurbo.checked + '&full-screen=' + packageFullScreen.checked : 'about:blank';
  }
  packageTurbo.addEventListener('change', updatePackageLink);
  packageFullScreen.addEventListener('change', updatePackageLink);
  function updateEmbedCode(e) {
    embedCode.value = P.player.projectId ? '<script src=https://' + location.host + '/embed.js?id=' + P.player.projectId + (embedHideControls.checked ? '&ui=false' : '&auto-start=' + embedAutoStart.checked + '&light-content=' + embedLightContent.checked) + '></' + 'script>' : '';
    embedAutoStart.disabled =
    embedLightContent.disabled = embedHideControls.checked;
    if (embedHideControls.checked) embedAutoStart.checked = true;
    if (e) embedCode.focus();
  }
  function selectEmbedCode() {
    setTimeout(function() {
      embedCode.select();
    });
  }
  embedCode.addEventListener('focus', selectEmbedCode);
  embedCode.addEventListener('click', selectEmbedCode);
  embedHideControls.addEventListener('change', updateEmbedCode);
  embedAutoStart.addEventListener('change', updateEmbedCode);
  embedLightContent.addEventListener('change', updateEmbedCode);

  //load(initialId);
  loadZipFileFronUrl("http://syjsu.oschina.io/scratch-player/flappybird.sb2");
 
  setTimeout(function() {
    function setTransition(el) {
      el.style.WebkitTransition =
      el.style.MozTransition =
      el.style.OTransition =
      el.style.transition = 'height 0.2s';
    }
    setTransition(titleArea);
    setTransition(playerArea);
    setTransition(projectArea);
  });
  function cancel(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
  }
  function loadZipFileFronUrl(url){
    //alert("open "+url);
    //location.hash = '#zip';
    show('zip');
    var xhr = new XMLHttpRequest();
      
        xhr.onprogress = updateProgress;
        xhr.upload.onprogress = updateProgress;
        function updateProgress(event) {
          if(event.lengthComputable) {
            var percentComplete = event.loaded / event.total;
            console.log("下载进度"+percentComplete+"下载体积"+event.loaded) ;
            $("#progress_bar_one").css("width", percentComplete*100+"%").find('span').html("当前"+(percentComplete*100).toFixed(0)+"% 共"+(event.loaded/1024/1024).toFixed(2)+"MB");
          }
        }
      
        xhr.open("get", url, true);
        xhr.responseType = "blob";
        xhr.onload = function() {
          if (this.status == 200) {
            var request = P.IO.loadSB2File(this.response);
            if (request) {
              P.player.showProgress(request, function(stage) {
                  stage.triggerGreenFlag();
                });
              }
            }
          }
    xhr.send();
  }
  document.body.addEventListener('dragover', cancel);
  document.body.addEventListener('dragenter', cancel);
  document.body.addEventListener('drop', function(e) {
    e.preventDefault();
    var f = e.dataTransfer.files[0];
    if (f) {
      location.hash = '#zip';
      show('zip');
      var ext = f.name.split('.').pop();
      if (ext === 'sb2' || ext === 'zip') {
        var request = P.IO.loadSB2File(f);
      } else if (ext === 'json') {
        request = P.IO.loadJSONFile(f);
      }
      if (request) {
        P.player.showProgress(request, function(stage) {
          stage.triggerGreenFlag();
        });
      }
    }
  });
}());
</script>
 </body>
</html>
